<script lang="ts" setup>
import { ref, provide, onMounted, onBeforeUnmount } from "vue";

const visible = ref(false);
const emit = defineEmits(["select"]);

const handleClick = () => {
  visible.value = !visible.value;
};

provide("select", () => {
  visible.value = !visible.value;
  emit("select");
});

const clickOutsideHandler = (e: any) => {
  if (!e.target.closest('.umrp-dropdown')) {
    visible.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', clickOutsideHandler)
})

onBeforeUnmount(() => {
  document.removeEventListener('click', clickOutsideHandler)
})
</script>

<template>
  <div class="umrp-dropdown">
    <div @click="handleClick">
      <slot></slot>
    </div>
    <div class="umrp-dropdown__content" v-if="visible">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.umrp-dropdown {
  position: relative;
  cursor: pointer;

  &__content {
    box-sizing: border-box;
    min-width: 100px;
    position: absolute;
    padding: 14px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 10px #0000001a;
  }
}
</style>
